<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用户消息')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">当前登录用户</h3>
                </div>
                <div class="panel-body">
                    <div class="list-group">
                        <a href="#" class="list-group-item">你好，<span id="user"></span></a>
                        <a href="logout" class="list-group-item">退出</a>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary" id="online">
                <div class="panel-heading">
                    <h3 class="panel-title">当前在线的其他用户</h3>
                </div>
                <div class="panel-body">
                    <div class="list-group" id="users">
                    </div>
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">群发系统广播</h3>
                </div>
                <div class="panel-body">
                    <input type="text" class="form-control"  id="msg" /><br>
                    <button id="broadcast" type="button" class="btn btn-primary">发送</button>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title" id="talktitle"></h3>
                </div>
                <div class="panel-body">
                    <div class="well" id="log-container" style="height:400px;overflow-y:scroll">

                    </div>
                    <input type="text" id="myinfo" class="form-control col-md-12" /> <br>
                    <button id="send" type="button" class="btn btn-primary">发送</button>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<script>
    let wssHost = "[(${wss})]";
    $(document).ready(function() {
        let token  = "1231243hkljhwkjh1233jjkfjsd";
        let uid    = 1231;
        let client = "web";
        let transport = "websocket";
        let user = "tom";
        //    ?token="+token+"&uid="+uid+"&client="+client+"&transport="+transport


        var websocket = new WebSocket("ws://localhost:8070/webSocket/"+user);

        console.log(websocket);

        websocket.onmessage = function(event) {
            var data=JSON.parse(event.data);
            if(data.to==0){//上线消息
                if(data.text!=user)
                {
                    $("#users").append('<a href="#" onclick="talk(this)" class="list-group-item">'+data.text+'</a>');
                    alert(data.text + "上线了");
                }
            }else if(data.to==-2){//下线消息
                if(data.text!=user)
                {
                    $("#users > a").remove(":contains('"+data.text+"')");
                    alert(data.text + "下线了");
                }
            }else {
                // 普通消息
                // 接收服务端的实时消息并添加到HTML页面中
                $("#log-container").append("<div class='bg-info'><label class='text-danger'>"+data.from+"&nbsp;"+data.date+"</label><div class='text-success'>"+data.text+"</div></div><br>");
                // 滚动条滚动到最低部
                scrollToBottom();
            }
        };

        $("#broadcast").click(function(){
            var data = {};
            data["from"] = "系统消息";
            data["to"] = -1;
            data["text"] = $("#msg").val();
            websocket.send(JSON.stringify(data));
        });

        $("#send").click(function() {
            if ($("body").data("to")==undefined) {
                alert("请选择聊天对象");
                return false;
            }
            var data = {};
            data["from"] = user;
            data["to"] = $("body").data("to");
            data["text"] = $("#myinfo").val();
            websocket.send(JSON.stringify(data));
            $("#log-container").append("<div class='bg-success'><label class='text-info'>我&nbsp;" + new Date().format("yyyy-MM-dd hh:mm:ss") + "</label><div class='text-info'>" + $("#myinfo").val() + "</div></div><br>");
            scrollToBottom();
            $("#myinfo").val("");
        });
    });
</script>

</body>
</html>
